import React, { memo, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import { getTopListAction } from "../../store/actionCreators";

import ThemHeader from "@/components/them-header";
import TopRanking from "@/components/top-ranking";
import { RankingWrapper } from "./style";
export default memo(function RecommendRanking() {
  const dispatch = useDispatch();
  const { upRanking, newRanking, originRanking } = useSelector((state) => ({
    upRanking: state.get("recommend").get("upRanking"),
    newRanking: state.get("recommend").get("newRanking"),
    originRanking: state.get("recommend").get("originRanking"),
  }));
  //console.log(upRanking, newRanking, originRanking);
  useEffect(() => {
    dispatch(getTopListAction(0));
    dispatch(getTopListAction(2));
    dispatch(getTopListAction(3));
  }, [dispatch]);
  return (
    <RankingWrapper>
      <ThemHeader title="榜单" />
      <div className="ranking">
        <TopRanking info={upRanking} />
        <TopRanking info={newRanking} />
        <TopRanking info={originRanking} />
      </div>
    </RankingWrapper>
  );
});
